<template>
  <v-sheet
    class="pa-5 pa-md-10 rounded-lg fontblack--text my-3"
    color="thirdary"
  >
    <div>
      <span class="text-h5">{{ mainTitle }}</span
      ><span class="text-caption ml-2">{{ subtitle }}</span>
    </div>
    <v-divider class="my-5"></v-divider>
    <div class="d-flex flex-row flex-wrap align-center">
      <div
        class="d-flex flex-row flex-wrap col-12 pa-0"
        v-if="isHadSlots"
        :class="{ 'col-md-8': isHadNotice }"
      >
        <div
          class="col-md-6 col-12 d-flex pa-0 py-10"
          v-for="(slotName, index) in slots"
          :key="index"
        >
          <slot :name="slotName"></slot>
        </div>
      </div>
      <div
        class="d-flex flex-row flex-wrap col-12 pa-0"
        :class="{ 'col-md-8': isHadNotice }"
        v-else
      >
        <slot></slot>
      </div>
      <div class="col-md-4 col-12 d-flex pa-0 py-10" v-if="isHadNotice">
        <slot name="notice"></slot>
      </div>
    </div>
  </v-sheet>
</template>



<script>
export default {
  props: {
    mainTitle: String,
    subtitle: String,
  },
  data() {
    return {
      slots: ["left", "mid"],
    };
  },
  computed: {
    isHadSlots() {
      for (const slotName of Object.keys(this.$slots)) {
        if (this.slots.includes(slotName)) return true;
      }
      return false;
    },
    isHadNotice() {
      return Object.keys(this.$slots).includes("notice");
    },
  },
};
</script>



<style lang="scss" scoped>
</style>
